Topics tagged with html5 vs. aria

Page must have means to bypass repeated blocks

cyberian — Invalid Date

Here is Fixes the Problem Ensure Each Page Has a Main Landmark Each page should include a main landmark to allow users to bypass repetitive blocks of content (such as headers or navigation) and quickly reach the primary content. This is essential for improving navigation, especially for keyboard-only users. • Use landmarks to define specific sections of the layout, such as the main content area. • A page should not contain more than one main landmark to avoid confusion in navigation. HTML5 vs. ARIA In general, it’s best to use native HTML5 elements over ARIA roles whenever possible. For instance, while ARIA role role=“main” is supported by most screen readers, it’s better to use the corresponding HTML5 element for clarity and compatibility. Good Example: Using Proper Landmarks In the example below, all content is enclosed within appropriate landmarks to ensure that different sections are clearly identified.

This is the header.

This is the main content.

This is a section.

This is an article.

Why It Matters Web pages often contain repeated content such as navigation menus, ads, or headers across multiple pages. For users who rely on keyboards for navigation, this repetition can lead to frustration, as they must tab through numerous elements before reaching the main content. By ensuring proper landmarks and skip links, you: • Reduce the number of keystrokes required to navigate the page. • Help users avoid unnecessary strain and fatigue, especially those with motor limitations or disabilities that prevent mouse use. Keyboard navigation without these enhancements can be slow and physically exhausting, particularly when it involves tabbing through large numbers of elements like links and buttons in the page header. Rule Description Every page must include a main landmark to provide users with a mechanism to bypass repeated elements like headers or navigation and jump directly to the primary content. Simple Algorithm The page must have at least one of the following: • An internal skip link • A heading • A landmark region Additional Resources Here are some resources for improving accessibility: • Deque University – Subscription-based training for accessibility. • WCAG ARIA11 – Guidelines on using ARIA landmarks to mark page regions. • G1 – How to add a link at the top of each page to skip directly to the main content. • H69 – Instructions for providing heading elements at the start of each section. You can also refer to the complete list of axe 4.10 rules. By following these guidelines, you can create a more accessible and user-friendly experience for all users, especially those relying on keyboard navigation.